<template>
  <div class="sticky top-0 w-64 h-screen bg-slate-100 shadow-md p-4 flex flex-col z-30">
    <div class="flex justify-between items-center mb-4">
      <h3 class="text-xl font-bold text-gray-800">会话列表</h3>
      <button
        @click="showDialog = true"
        class="text-gray-500 hover:text-blue-500 transition text-xl"
        aria-label="添加会话"
      >
        ➕
      </button>
    </div>

    <ul class="flex-1 overflow-auto space-y-2 custom-scrollbar">
      <li
        v-for="session in sessions"
        :key="session.id"
        @click="$emit('select', session)"
        :class="[
          'p-3 rounded-lg cursor-pointer transition-colors duration-200',
          session.id === currentId
            ? 'bg-blue-500 text-white'
            : 'bg-white hover:bg-blue-200 text-gray-800'
        ]"
      >
        <div class="font-medium truncate">{{ session.name }}</div>
        <div class="text-sm text-gray-500 truncate">{{ session.lastMessage }}</div>
      </li>
    </ul>

    <!-- 添加对话框（无动画无阴影） -->
    <div v-if="showDialog" class="fixed inset-0 bg-transparent flex items-center justify-center z-50">
      <div class="bg-white rounded-lg p-6 w-80">
        <h3 class="text-lg font-bold text-gray-800 mb-4">添加好友 / 群聊</h3>

        <input v-model="inputValue" placeholder="请输入用户名或群名"
          class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-300 mb-4" />

        <div class="flex justify-end space-x-3">
          <button @click="showDialog = false"
            class="px-4 py-2 bg-gray-200 text-gray-700 rounded hover:bg-gray-300 transition">
            取消
          </button>
          <button @click="addSession" class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 transition">
            添加
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { Session } from '@/utils/mockData'

const props = defineProps<{
  sessions: Session[]
  currentId: number
}>()

const emit = defineEmits<{
  (e: 'select', session: Session): void
  (e: 'add', name: string): void
}>()

const showDialog = ref(false)
const inputValue = ref('')

function addSession() {
  if (!inputValue.value.trim()) return
  emit('add', inputValue.value.trim())
  inputValue.value = ''
  showDialog.value = false
}
</script>

<style scoped>
.custom-scrollbar::-webkit-scrollbar {
  width: 6px;
}
.custom-scrollbar::-webkit-scrollbar-track {
  background: transparent;
}
.custom-scrollbar::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.fade-scale-enter-active,
.fade-scale-leave-active {
  transition: all 0.2s ease, transform 0.2s ease;
}
.fade-scale-enter-from,
.fade-scale-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
.fade-scale-enter-to,
.fade-scale-leave-from {
  opacity: 1;
  transform: scale(1);
}
</style>
